

// nutui组件
import React, { useState, useEffect } from "react";
import { Drag } from "@nutui/nutui-react";
import "./index.css";
const Index: React.FC = () => {
  const [dragScroll, setDragScroll] = useState<number>(0);
  const backTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  useEffect(() => {
    const handleScroll = () => {
      // 获取并打印滚动值
      const scrollValue = document.documentElement.scrollTop;
      // console.log("滚动值:", scrollValue);
      setDragScroll(scrollValue);

      // 这里你可以根据scrollValue做更多的逻辑处理
    };

    // 添加滚动事件监听器
    window.addEventListener("scroll", handleScroll);

    // 清理函数，移除监听器
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []); // 空数组表示这个effect只在组件挂载和卸载时运行
  return (
    <>
      {dragScroll >= 500 && (
        <Drag
          style={{
            top: window.innerHeight - 200,
            left: window.innerWidth - 40,
          }}
          attract
        >
          <div className="img" onClick={backTop}></div>
        </Drag>
      )}
    </>
  );
};

export default Index;
